<template>
<div class="content">
    <div class="info-box">
        <div class="steps-box">
            <el-steps :active="1" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="品类/尺寸"></el-step>
                <el-step title="盒型"></el-step>
                <el-step title="色系"></el-step>
                <el-step title="包装体现"></el-step>
                <el-step title="工艺"></el-step>
            </el-steps>
        </div>
        

        <el-form ref="form" :model="prodictInfo" label-width="80px" :rules="regRules">
            <p class="text">注意:尺寸是堵头的尺寸,如果选多个膜放在同一个盒子的话，建议选择15×15cm</p>
            <el-form-item label="太阳膜" prop="solarFilm">
                <el-radio-group v-model="prodictInfo.solarFilm" class="radio-group" 
                    @click.native="onRadioChange1($event)">
                    <el-radio v-for="(item, index) in solarFilmData" :key="index" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
                </el-radio-group>
                <el-form-item v-if="prodictInfo.solarFilm === '3'" prop="solarFilmSize">
                    <el-input v-model="prodictInfo.solarFilmSize" style="width:80%"></el-input>
                </el-form-item>
            </el-form-item>

            <el-form-item label="改色膜" prop="colorChangeFilm">
                <el-radio-group v-model="prodictInfo.colorChangeFilm" class="radio-group" 
                    @click.native="onRadioChange2($event)">
                    <el-radio v-for="(item, index) in colorChangeFilmData" :key="index" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
                </el-radio-group>
                <el-form-item v-if="prodictInfo.colorChangeFilm === '2'" prop="colorChangeFilmSize">
                    <el-input v-model="prodictInfo.colorChangeFilmSize" style="width:80%"></el-input>
                </el-form-item>
            </el-form-item>

            <el-form-item label="漆面膜" prop="lacquerFilm">
                <el-radio-group v-model="prodictInfo.lacquerFilm" class="radio-group"
                    @click.native="onRadioChange3($event)">
                    <el-radio v-for="(item, index) in lacquerFilmData" :key="index" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
                </el-radio-group>
                <el-form-item v-if="prodictInfo.lacquerFilm === '2'" prop="lacquerFilmSize">
                    <el-input v-model="prodictInfo.lacquerFilmSize" style="width:80%"></el-input>
                </el-form-item>
            </el-form-item>
        </el-form>
        <div class="button-box">
            <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
    </div> 
</div>
</template>

<script>
import {getDicts} from "@/api/design/dict/data"
export default {
    data() {
        return {
            solarFilmData:[],
            colorChangeFilmData:[],
            lacquerFilmData:[],
            prodictInfo:{},
			productDictVo:{
				list:[],
				parentId:null
			},
            regRules:{
                solarFilm: [
                    {
                        validator: (rule, value, callback) => {
                            if (!value && !this.prodictInfo.colorChangeFilm && !this.prodictInfo.lacquerFilm) {
                                callback(new Error('请至少选择一种膜'));
                            } else if (value === '3' && !this.prodictInfo.solarFilmSize) {
                                callback(new Error('请输入自定义太阳膜尺寸'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur',
                    },
                ],
                colorChangeFilm: [
                    {
                        validator: (rule, value, callback) => {
                            if (!value && !this.prodictInfo.solarFilm && !this.prodictInfo.lacquerFilm) {
                                callback(new Error('请至少选择一种膜'));
                            } else if (value === '2' && !this.prodictInfo.colorChangeFilmSize) {
                                callback(new Error('请输入自定义改色膜尺寸'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur',
                    },
                ],
                lacquerFilm: [
                    {
                        validator: (rule, value, callback) => {
                            if (!value && !this.prodictInfo.solarFilm && !this.prodictInfo.colorChangeFilm) {
                                callback(new Error('请至少选择一种膜'));
                            } else if (value === '2' && !this.prodictInfo.lacquerFilmSize) {
                                callback(new Error('请输入自定义漆面膜尺寸'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur',
                    },
                ],
            }
        }
        
    },
    methods: {
        nextStep(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$router.push(
                        {
                            path:'/boxType', 
                            query: {
                                userName: this.prodictInfo.userName,
                                sex:this.prodictInfo.sex,
                                age:this.prodictInfo.age,
                                solarFilm:this.prodictInfo.solarFilm,
                                solarFilmSize:this.prodictInfo.solarFilmSize,
                                colorChangeFilm:this.prodictInfo.colorChangeFilm,
                                colorChangeFilmSize:this.prodictInfo.colorChangeFilmSize,
                                lacquerFilm:this.prodictInfo.lacquerFilm,
                                lacquerFilmSize:this.prodictInfo.lacquerFilmSize,
                            }
                        }
                    )
                }
            })
        },
        onRadioChange1(e) {
            if (e.target.tagName === 'INPUT') {
                if(e.target._value === this.prodictInfo.solarFilm){
                    this.prodictInfo.solarFilm = ''
                }
            }
        },
        onRadioChange2(e) {
            if (e.target.tagName === 'INPUT') {
                if(e.target._value === this.prodictInfo.colorChangeFilm){
                    this.prodictInfo.colorChangeFilm = ''
                }
            }
        },
        onRadioChange3(e) {
            if (e.target.tagName === 'INPUT') {
                if(e.target._value === this.prodictInfo.lacquerFilm){
                    this.prodictInfo.lacquerFilm = ''
                }
            }
        }

    },
    created() {
        this.prodictInfo.userName = this.$route.query.userName
        this.prodictInfo.sex = this.$route.query.sex
        this.prodictInfo.age = this.$route.query.age
		this.productDictVo.list.push("solar_film","color_change_film","lacquer_film")
	getDicts(this.productDictVo).then(res => {
		this.solarFilmData = res.data.filter(item => item.dictType === "solar_film");  // 返回比较结果;
		this.colorChangeFilmData = res.data.filter(item => item.dictType === "color_change_film");  // 直接返回比较结果
		this.lacquerFilmData = res.data.filter(item => item.dictType === "lacquer_film");  // 直接返回比较结果
	});
   
    },
}
</script>

<style scoped>
.content{
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
.info-box{
    margin-top: 20px;
}
.steps-box{
    margin-bottom: 50px;
}
::v-deep .el-step__title{
    font-size: 14px;
}
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.button-box{
    display: flex;
    justify-content: center;
    margin-top: 10%;
}
.text{
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    text-indent: 2em;
}
</style>